<template>
  <div class="debounceOrThrottle">
    <a-input v-model:value="inputValue" @input="defaultDebounce"></a-input>
    <p>{{ inputContent }}</p>
    <a-button @click="defaultThrottle">throttle</a-button>
    <p>{{ clickCount }}</p>
  </div>
</template>
<script setup lang="ts">
import { debounce, throttle } from '@/utils/index.ts'
import { ref } from 'vue'

const inputValue = ref('')
const inputContent = ref('')
const clickCount = ref(0)
// 输入防抖
const inputDebounce = (event) => {
  // 防抖
  // 防抖： 连续触发事件，如果持续触发，则会在触发事件后延迟一段时间才会执行回调函数
  // 适用场景： 输入框输入内容，如果持续输入，则会在输入结束后延迟一段时间才会执行回调函数
  inputContent.value = inputValue.value
  console.log('inputDebounce', event, inputContent)
}
// 点击节流
const clickThrottle = () => {
    clickCount.value++
}
const defaultDebounce = debounce(inputDebounce)
const defaultThrottle = throttle(clickThrottle)
</script>
<style lang="scss" scoped>
.debounceOrThrottle {
}
</style>
